<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/7/28
  Time: 19:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入jquery依赖--%>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body style="text-align: center">
<hr/>
<h1>普通对象传参</h1>
<h2>form表单形式</h2>
<form action="/demo0728/objectForm">
    <input type="text"  name="name"><br/><br/>
    <input type="text"  name="account"><br/><br/>
    <button type="submit">提交</button>
    <h2>提交的内容:${demo}</h2>
</form>
<h2>form表单形式-ajax提交</h2>
    <input type="text"  id="name"><br/><br/>
    <input type="text"  id="account"><br/><br/>
    <button onclick="t1()">提交</button>
<hr/>
<h2>form表单形式-ajax提交-json参数提交</h2>
<input type="text"  id="nameJson"><br/><br/>
<input type="text"  id="accountJson"><br/><br/>
<button onclick="t2()">提交</button>
<hr/>
<h2>form表单形式-ajax提交-数组</h2>
<button onclick="t3()">提交 - 方式一</button>
<button onclick="t4()">提交  - 方式二</button>
<button onclick="t5()">提交  - 方式三，json参数</button>
<hr/>
<h2>ajax提交-对象+List</h2>
<button onclick="t6()">提交</button>
<hr/>
<form action="/demo0728/objectFormList">
    <input type="text"  name="userId"><br/><br/>
    <input type="text"  name="name"><br/><br/>
    <input type="text"  name="selectTitleList[0].id"><br/><br/>
    <input type="text"  name="selectTitleList[0].result"><br/><br/>
    <input type="text"  name="selectTitleList[1].id"><br/><br/>
    <input type="text"  name="selectTitleList[1].result"><br/><br/>
    <input type="text"  name="selectTitleList[2].id"><br/><br/>
    <input type="text"  name="selectTitleList[2].result"><br/><br/>
    <button type="submit">提交</button>
    <h2>提交的内容:${demoUser}</h2>
</form>
<hr/>
<h1>hello world!:${name}</h1>
<h1>hello world!:${name0}</h1>
<h1>hello world!:${name1}</h1>
<h1>hello world!:${name2}</h1>
<h1>hello world!:${name3}</h1>
<h1>hello world!:${name4}</h1>
<hr/>

<script>
    function t1(){
        $.ajax({
            type: "post", //post--->doPost()
            url: "/demo0728/objectFormAjax",    //传输地址的URL
            data: {
                "name":$("#name").val(),
                "account":$("#account").val(),
            }, //data代表我们的数据  key -value类型的数据
            success: function (data)
            {
                console.log("=========t1成功！============");
                console.log(data);
            },
            error:function (XMLHttpRequest, textStatus, errorThrown) {
                alert(typeof(errorThrown));
            }
        });
    }
    function t2(){
        $.ajax({
            type: "post", //post--->doPost()
            url: "/demo0728/objectFormAjaxJson",    //传输地址的URL
            contentType: "application/json;charset=utf-8", // => @RequestBody
            data:JSON.stringify({
                "name":$("#nameJson").val(),
                "account":$("#accountJson").val(),
            }), //data代表我们的数据  key -value类型的数据
            success: function (data)
            {
                console.log("=========t2成功！============");
                console.log(data);
            },
            error:function (XMLHttpRequest, textStatus, errorThrown) {
                alert(typeof(errorThrown));
            }
        });
    }

    function t3(){
        $.ajax({
            type: "post", //post--->doPost()
            url: "/demo0728/deleteByIds",    //传输地址的URL
            data:{
                ids: "1,2,3,4"   // 后台通过ids数组接收
            }, //data代表我们的数据  key -value类型的数据
            success: function (data)
            {
                console.log("=========t3成功！============");
                console.log(data);
            },
            error:function (XMLHttpRequest, textStatus, errorThrown) {
                alert(typeof(errorThrown));
            }
        });
    }
    function t4(){
        $.ajax({
            type: "post", //post--->doPost()
            url: "/demo0728/deleteByIds?ids=1&ids=2&ids=3",    //传输地址的URL
            success: function (data)
            {
                console.log("=========t4成功！============");
                console.log(data);
            },
            error:function (XMLHttpRequest, textStatus, errorThrown) {
                alert(typeof(errorThrown));
            }
        });
    }

    function t5(){
        $.ajax({
            type: "post", //post--->doPost()
            url: "/demo0728/deleteByIdsJson",    //传输地址的URL
            contentType: "application/json;charset=utf-8", // => @RequestBody
            data:JSON.stringify([1,2,3,4,5,6]), //data代表我们的数据  key -value类型的数据
            success: function (data)
            {
                console.log("=========t5成功！============");
                console.log(data);
            },
            error:function (XMLHttpRequest, textStatus, errorThrown) {
                alert(typeof(errorThrown));
            }
        });
    }


    //  列举一个场景：考试答题前端传给后台： 答题人的信息以及 每道题的 题目id以及所选答案
    //  =>   对象 +   动态List  格式



    function t6(){
        $.ajax({
            type: "post", //post--->doPost()
            url: "/demo0728/objectFormListAjaxJson",    //传输地址的URL
            contentType: "application/json;charset=utf-8", // => @RequestBody
            data:JSON.stringify({
                "userId":1,
                "name":"admin",
                "selectTitleList":[
                    {
                        "id":1,
                        "result":"A"
                    },
                    {
                        "id":2,
                        "result":"B"
                    },
                    {
                        "id":3,
                        "result":"C"
                    },
                ]
            }), //data代表我们的数据  key -value类型的数据
            success: function (data)
            {
                console.log("=========t6成功！============");
                console.log(data);
            },
            error:function (XMLHttpRequest, textStatus, errorThrown) {
                alert(typeof(errorThrown));
            }
        });
    }


</script>
</body>
</html>
